<template>
   <div>
  
    <city-header></city-header>
    <city-search></city-search>
    <city-list :cities="cities" :hotCities="hotCities"
    :letter="letter"></city-list>
    <city-alphabet :cities="cities"
    @change="handleLetterChange"></city-alphabet>
   </div>
</template>
<script>
import CityHeader from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/list'
import CityAlphabet from './components/Alphabet'
import axios from 'axios'
export default {
    name:'City',
    components:{
CityHeader,
CitySearch,
CityList,
CityAlphabet
    
},
data(){
  return {
    cities:{},
    hotCities:[],
    letter:''
  }
}

, methods:{
       getCityInfoSucc(res){    
     res=res.data
     
     if(res.ret&&res.data){
   this.cities=res.data.cities
     this.hotCities=res.data.hotCities
    
     }
  
       },
       getCityInfo(){
 // 为给定 ID 的 user 创建请求
axios.get('/api/city.json')
  .then(this.getCityInfoSucc)
  .catch(function (error) {
    console.log(error);
  });
       },
       handleLetterChange(letter){
this.letter=letter
       }
    },
    mounted:function(){
     this.getCityInfo()  
    }
}
</script>
<style lang="stylus" scoped>

</style>

